<template>
  <div class="singer-popup">
    <div v-for="singType in singerTitle" :key="singType.title">
      <h4>{{ singType.title }}</h4>
      <ul style="list-style: square;">
        <li
            v-for="type in singType.type"
            :key="type.title"
            class="ml-8 mt-2 mb-2 cursor-pointer yu-textColor-hover"
            @click="changeSingerType(type)"
            :class="(type.area === activeSinger.area && type.type === activeSinger.type) ? 'yu-textColor-active' : ''"
        >
          {{ type.title }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup>
import {reactive, toRefs} from "vue";

const data = reactive({
  // 歌手信息
  singerTitle: [
    {
      title: '推荐',
      type: [
        { title: '推荐' }
      ]
    },
    {
      title: '华语',
      type: [
        { title: '华语男歌手', area: 7, type: 1, initial: -1 },
        { title: '华语女歌手', area: 7, type: 2, initial: -1},
        { title: '华语组合/乐队', area: 7, type: 3, initial: -1},
      ]
    },
    {
      title: '欧美',
      type: [
        { title: '欧美男歌手', area: 96, type: 1, initial: -1 },
        { title: '欧美女歌手', area: 96, type: 2, initial: -1},
        { title: '欧美组合/乐队', area: 96, type: 3, initial: -1},
      ]
    },
    {
      title: '日本',
      type: [
        { title: '日本男歌手', area: 8, type: 1, initial: -1 },
        { title: '日本女歌手', area: 8, type: 2, initial: -1},
        { title: '日本组合/乐队', area: 8, type: 3, initial: -1},
      ]
    },
    {
      title: '韩国',
      type: [
        { title: '韩国男歌手', area: 16, type: 1, initial: -1 },
        { title: '韩国女歌手', area: 16, type: 2, initial: -1},
        { title: '韩国组合/乐队', area: 16, type: 3, initial: -1},
      ]
    },
    {
      title: '其他',
      type: [
        { title: '其他男歌手', area: 0, type: 1, initial: -1 },
        { title: '其他女歌手', area: 0, type: 2, initial: -1},
        { title: '其他组合/乐队', area: 0, type: 3, initial: -1},
      ]
    },
  ],
})
const { singerTitle } = toRefs(data);

defineProps({
  activeSinger: Object // 父组件中传递的类型用来活动歌手标题类型
})
// 导出事件
const $emit = defineEmits(['changeSingerType']);
const changeSingerType = (type) => {
  $emit('changeSingerType', type)
}
</script>

<style scoped>

</style>
